<!--
 * 自由组合页面，性能好、灵活性高
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add @click="editRef.open()" />
          <btn-tool-remove @click="remove()" />
          <btn-tool-export />
          <btn-tool-import />
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="scope">
        <btn-row-view @click="detailRef.open(scope.row)" />
        <btn-row-update @click="editRef.open({ id: scope.row.id })" />
        <btn-row-remove @click="remove(scope.row.id)" />
        <!--        <a class="gl-btn-audit">审核</a>
        <a class="gl-btn-submit">提交</a>-->
      </template>

      <!-- 搜索栏插槽 -->
      <template #search1="{ data, field, componentProps }">
        <t-input v-model="data[field]" placeholder="我是自定义插槽1" />
      </template>
      <template #search2="{ data, field, componentProps }">
        <t-input v-model="data[field]" placeholder="我是自定义插槽2" />
      </template>
      <template #search2-label="{ label }"> label插槽 </template>
      <template #search2-error="{ error }"> error插槽 </template>

      <!--  表格插槽  -->
      <template #table1="{ row, rowIndex, col, colIndex }"> 我是插槽1 </template>
      <template #table2="{ row, rowIndex, col, colIndex }"> 我是插槽2 </template>
      <template #title="{ row, rowIndex, col, colIndex }"> title插槽 </template>
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, useTable } from '@/soar';
import schema from './schema';
import api from './api';
import Edit from './Edit.vue';
import Detail from './Detail.vue';

// 使用表格
const editRef = ref();
const detailRef = ref();

const { remove, reload, tableProps } = useTable<any>({
  api,
  props: {
    actionbar: {
      width: 150,
    },
  },
});
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
